<template>
	<view class="main">
		<view class="header">
			<view class="logo">
				<image src="@/static/img/logo.png" mode=""></image>
			</view>
			<view class="content">
				<p class="msg">请完善信息进行登录</p>
				<ul>
					<li v-if="loginFn">
						<p>手机号</p>
						<input v-model="account" type="number" placeholder="请输入手机号" />
					</li>
					<li v-else>
						<p>员工工号</p>
						<input v-model="account" type="number" placeholder="请输入员工工号" />
					</li>
					<li v-if="!seleLogin">
						<p>密码</p>
						<input v-model="password" type="password" placeholder="请输入密码" />
					</li>
					<li class="code" v-if="seleLogin">
						<p>验证码</p>
						<view class="right">
							<input v-model="captcha" type="number" placeholder="请输入验证码" />
							<view class="btn" @tap="getCode()">
								<view v-if="isCode" class="countdown">
									<u-count-down :time="60 * 1000" format="ss" @finish="isCode = false"></u-count-down>
									<span>后可重新获取</span>
								</view>
								<span v-else>获取验证码</span>
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>
		<view class="fn">
			<view class="confirm btn" v-if="loginFn" @tap="getLogin">确认登录</view>
			<view class="confirm btn" v-else @tap="getLogin2">确认登录</view>
			<view class="sele btn" v-if="loginFn" @tap="seleLogin = !seleLogin">
				<span v-if="seleLogin">账号密码登录</span>
				<span v-else>验证码登录</span>
			</view>
			<view class="msg2">
				<u-checkbox-group v-model="checkboxValue1" placement="column">
					<u-checkbox shape="circle" :name="1"></u-checkbox>
				</u-checkbox-group>
				请您阅读并同意<span @tap="routerTo('/pages/my/UserAgreement')">《用户协议》</span>和<span
					@tap="routerTo('/pages/my/PrivacyAgreement')">《隐私协议》</span>
			</view>
			<view class="msg" v-if="loginFn">
				还没账号？
				<span @tap="routerTo('/pages/login/register')">去注册</span>
			</view>
			<view class="seleMsg" @tap="seleFn()">
				<span v-if="loginFn">员工端</span>
				<span v-else>用户端</span>
			</view>
		</view>
		<navigator url=""></navigator>
	</view>
</template>

<script>
	import {
		login,
		mobilelogin,
		send
	} from '@/api/login.js';
	import {
		innerlogin,
		addDevice
	} from '@/api/inner.js';
	export default {
		data() {
			return {
				seleLogin: false,
				isCode: false,
				account: '', //账号手机号
				password: '', //密码
				captcha: '', //验证码
				loginFn: true,
				show: false,
				agree: false,
				checkboxValue1: []
			};
		},
		onLoad() {
			// if (!uni.getStorageSync('agree')) {
			// 	this.show = true;
			// }else{
			// 	this.agree = true
			// }
		},
		onShow() {
			// document.querySelector('.uni-page-head-hd').style.display = 'none';
		},
		methods: {
			cancel() {
				/*#ifdef H5*/
				this.show = false;
				/*#endif*/
				/*#ifdef APP-PLUS*/
				this.show = false
				if (uni.getSystemInfoSync().platform === 'android ') {
					plus.runtime.quit();
				} else {
					plus.runtime.launchApplication({
						action: 'QUIT'
					});
				}
				/*#endif*/
			},
			confirm() {
				uni.setStorageSync('agree', 'agree');
				this.agree = true;
				this.show = false;
			},
			seleFn() {
				this.account = '';
				this.password = '';
				this.captcha = '';
				this.loginFn = !this.loginFn;
				this.seleLogin = false;
				if (!this.loginFn) {
					uni.setNavigationBarTitle({
						title: '员工登录'
					});
				} else {
					uni.setNavigationBarTitle({
						title: '用户登录'
					});
				}
			},
			async getLogin2() {
				if (this.checkboxValue1.length == 0) {
					uni.showToast({
						title: '请先同意用户协议和隐私协议',
						icon: 'none'
					});
					return;
				}
				if (this.account.length == 0) {
					uni.showToast({
						title: '请输入员工工号',
						icon: 'none'
					});
					return;
				} else if (this.password.length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				let res = await innerlogin({
					account: this.account,
					password: this.password
				});
				if (res.code != 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					uni.setStorageSync('enterprise', 'enterprise');
					uni.setStorageSync('token', res.data.userinfo.token);
					/*#ifdef APP-PLUS*/
					uni.getPushClientId({
						success: (res) => {
							let push_clientid = res.cid
							console.log('客户端推送标识cid:', push_clientid)
							addDevice({
								client_id: push_clientid
							}).then((res) => {
								console.log(res)
							})
						},
						fail(err) {
							console.log(err)
						}
					})
					/*#endif*/
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/index/inner'
						});
					}, 1000);
				}
			},
			async getCode() {
				if (this.account.length == 0) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				let res = await send({
					mobile: this.account,
					event: 'mobilelogin'
				});
				console.log(res);
				if (res.code == 1) {
					this.isCode = true;
					uni.showToast({
						title: '验证码获取成功',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			getLogin() {
				if (this.checkboxValue1.length == 0) {
					uni.showToast({
						title: '请先同意用户协议和隐私协议',
						icon: 'none'
					});
					return;
				}
				if (!this.seleLogin) {
					if (this.password.length == 0) {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						});
						return;
					} else if (this.account.length == 0) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					login({
						account: this.account,
						password: this.password
					}).then((res) => {
						if (res.code != 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							uni.setStorageSync('token', res.data.userinfo.token);
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}, 1000);
						}
					});
				} else {
					if (this.password.length == 0) {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						});
						return;
					} else if (this.account.length == 0) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					mobilelogin({
						mobile: this.account,
						captcha: this.captcha
					}).then((res) => {
						if (res.code != 1) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							uni.setStorageSync('token', res.data.userinfo.token);
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								});
							}, 1000);
						}
					});
				}
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.uni-page-head-hd {
		display: none !important;
	}

	.main {
		min-height: 100vh;
		background-color: #efefef;

		/deep/.u-modal__content {
			.slot-content {
				span {
					color: #0c80fb;
				}
			}
		}

		.header {
			padding-top: 35px;
			background-color: #fff;

			.logo {
				display: flex;
				justify-content: center;
				margin-bottom: 30px;

				image {
					width: 90px;
					height: 120px;
				}
			}

			.content {
				.msg {
					text-align: center;
					color: #666666;
					font-size: 15px;
					margin-bottom: 30px;
				}

				ul {
					padding: 0 30px;

					li {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-top: 1px solid #efefef;
						padding-top: 20px;
						padding-bottom: 20px;

						input {
							width: 60%;
							font-size: 15px;
						}
					}

					.code {
						position: relative;

						.right {
							width: 60%;
							justify-content: right;
							display: flex;
							align-items: center;

							input {
								flex: 1;
								padding-right: 8px;
							}

							.btn {
								padding: 8px 7px;
								color: #fff;
								background-color: #0c80fb;
								font-size: 12px;
								border-radius: 5px;

								.countdown {
									display: flex;
									align-items: center;

									/deep/.u-count-down__text {
										color: #fff;
										font-size: 12px;
										line-height: 0;
									}
								}
							}
						}
					}
				}
			}
		}

		.fn {
			padding: 20px 15px 0;

			.xieyi {
				display: flex;
				margin-bottom: 10px;

				/deep/.uni-checkbox-input-checked {
					border-radius: 100px;
				}

				/deep/.uni-checkbox-input {
					border-radius: 100px;
				}

				p {
					display: flex;
					align-items: center;

					span {
						color: #0c80fb;
					}
				}
			}

			.btn {
				width: 100%;
				padding: 18px 0;
				text-align: center;
				margin-bottom: 15px;
				border-radius: 5px;
			}

			.confirm {
				background-color: #0c80fb;
				color: #fff;
			}

			.sele {
				background-color: #fff;
				color: #000;
			}

			.msg2 {
				text-align: center;
				font-size: 15px;
				color: #999999;
				margin-bottom: 20px;
				display: flex;
				align-items: center;

				span {
					color: #0c80fb;
				}
			}

			.msg {
				text-align: center;
				font-size: 15px;
				color: #999999;
				margin-bottom: 20px;


				span {
					color: #0c80fb;
				}
			}


			.seleMsg {
				text-align: center;
				font-size: 15px;
				color: #0c80fb;
			}
		}
	}
</style>